<template>
	<div class="review-content">
		<div class="head">
			<span class="title">{{ $t('merchant.add_merchant_detail') }}</span>
			<div v-if="type" class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="success" @click="confirm(true)">
					{{ $t('merchant.apply_pass') }}
				</el-button>
				<el-button type="danger" @click="confirm(false)">
					{{ $t('merchant.apply_refuse') }}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<div class="review-content">
				<p class="name">{{ $t('merchant.base_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('merchant.merchant_name') }}:
						{{ rowData.merchantName || '-' }}
					</div>
					<div>
						{{ $t('merchant.merchant_code') }}:
						{{ rowData.merchantCode || '-' }}
					</div>
					<div>
						{{ $t('merchant.merchant_template') }}:
						{{ rowData.merchantTemplate || '模板一' }}
					</div>
					<div>
						{{ $t('merchant.merchant_level') }}:
						{{ rowData.merchantLevelName || '-' }}
					</div>
					<div>
						{{ $t('merchant.merchant_up') }}:
						{{ rowData.parentMerchantName || '-' }}
					</div>
					<div>
						{{ $t('merchant.merchant_wallet') }}:
						{{ rowData.currency || '-' }}
					</div>
					<div>
						{{ $t('merchant.merchant_lang') }}:
						{{
							(rowData.languages || '-')
								.split(',')
								.map((item) =>
									typeFilter(item, 'language').replace(
										'-',
										''
									)
								)
								.join(',')
						}}
					</div>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('merchant.apply_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('merchant.applicant') }}:
						{{ rowData.createdBy || '-' }}
					</div>
					<div>
						{{ $t('merchant.apply_time') }}:
						{{ rowData.createdAt || '-' }}
					</div>
					<el-tooltip
						:content="rowData.applyRemark"
						:disabled="
							rowData.applyRemark &&
								rowData.applyRemark.length <= 20
						"
						class="item"
						effect="dark"
						enterable
						placement="top-start"
					>
						<div class="nowrap">
							{{ $t('merchant.apply_remark') }}:
							{{ rowData.applyRemark || '-' }}
						</div>
					</el-tooltip>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('merchant.examine_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('merchant.auditor') }}:
						{{ rowData.auditName || '-' }}
					</div>
					<div>
						{{ $t('merchant.examine_time') }}:
						{{ rowData.auditDatetime || '-' }}
					</div>
					<el-tooltip
						v-if="rowData.auditRemark"
						:content="rowData.auditRemark"
						:disabled="rowData.auditRemark.length <= 20"
						class="item"
						effect="dark"
						enterable
						placement="top-start"
					>
						<div class="nowrap">
							{{ $t('merchant.examine_remark') }}:
							{{ rowData.auditRemark }}
						</div>
					</el-tooltip>
					<div v-else class="nowrap">
						{{ $t('merchant.examine_remark') }}: -
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			:before-close="closeFormDialog"
			:title="$t('merchant.apply_confirm')"
			:visible.sync="visible"
			center
			class="audit-confirm"
			:width="getWidth('610px')"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="auto"
			>
				<el-form-item
					:label="$t('merchant.submit_apply_info')"
					prop="remark"
				>
					<el-input
						v-model.trim="form.remark"
						:autosize="{ minRows: 4, maxRows: 4 }"
						:maxlength="500"
						:placeholder="$t('common.please_enter')"
						clearable
						show-word-limit
						style="width: 380px"
						type="textarea"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :loading="loading" @click="resetSubmit">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" :loading="loading" @click="auditOne">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { merchantAuditApi } from '@/api/merchant/merchant-manage/merchange-review'

export default {
	mixins: [list],
	props: {
		type: Boolean,
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		this.auditOne = this.throttle(this.auditOne, 1000)
		return {
			form: {
				remark: ''
			},
			loading: false,
			visible: false,
			action: false
		}
	},
	computed: {
		formRules() {
			return {
				remark: [
					{
						min: 2,
						max: 500,
						required: true,
						message: this.$t('merchant.check_length_2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		// 更新未读条数
		async initUpcomingSelect() {
			this.$api
				.getUpcomingSelect()
				.then((res) => {
					if (res?.code === 200) {
						const jsonStr = res.data
						// 新增商户审核
						this.$store.dispatch('user/setAudit', {
							value: jsonStr.auditMerchantAdd,
							type: 'auditMerchantAdd'
						})
					}
				})
				.catch(() => {
					// this.loginOut()
				})
		},
		closeFormDialog() {
			this.visible = false
			this.$refs['form'].resetFields()
		},
		confirm(action) {
			this.remark = ''
			this.action = action
			this.visible = true
		},
		auditOne() {
			const params = {
				id: this.rowData.id,
				remark: this.form.remark,
				auditStatus: this.action ? 2 : 3
			}

			this.$refs['form'].validate(async (v) => {
				if (v) {
					this.loading = true
					try {
						await merchantAuditApi(params)
						this.$message({
							type: 'success',
							message: this.$t('common.submit_success')
						})
						await this.initUpcomingSelect()
						await this.$store.dispatch('user/getMerchantList')
						this.resetSubmit()
						this.goBack()
						this.loading = false
					} catch (e) {
						this.loading = false
					}
				}
			})
		},
		goBack() {
			this.$emit('goBack')
		},
		resetSubmit() {
			this.$refs['form'].resetFields()
			this.visible = false
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: left;
	color: #909399;
	font-weight: 700;
}

::v-deep .rempadding .el-dialog__body {
	padding: 15px 20px;
}

.review-content {
	width: 100%;

	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;

		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}

		.right-btn {
			float: right;
		}
	}

	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0px;
			padding: 30px;

			.name {
				font-weight: 600;
			}

			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;

				div {
					display: inline-block;
					width: 32%;
					line-height: 30px;
				}
			}
		}

		.more-height {
			height: 200px;
		}
	}
}
.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
